<template>
	<div class="overflow-hidden">
		<n-card title="用户管理" :bordered="false" class="h-full rounded-8px shadow-sm">
			<div class="flex-col h-full">
				<n-space class="pb-12px" justify="space-between">
					<n-space>
						<n-button type="primary" @click="handleAddTable">
							<icon-ic-round-plus class="mr-4px text-20px" />
							新增
						</n-button>
						<n-button type="error">
							<icon-ic-round-delete class="mr-4px text-20px" />
							删除
						</n-button>
						<n-button type="success">
							<icon-uil:export class="mr-4px text-20px" />
							导出Excel
						</n-button>
					</n-space>
					<n-space align="center" :size="18">
						<n-button size="small" type="primary" @click="getTableData">
							<icon-mdi-refresh class="mr-4px text-16px" :class="{ 'animate-spin': loading }" />
							刷新表格
						</n-button>
						<column-setting v-model:columns="columns" />
					</n-space>
				</n-space>
				<n-data-table :columns="columns" :data="tableData" :loading="loading" :pagination="pagination" flex-height
					class="flex-1-hidden" />
				<table-action-modal v-model:visible="visible" :type="modalType" :edit-data="editData" />
			</div>
		</n-card>
	</div>
</template>

<script setup lang="tsx">
import { reactive, ref } from "vue";
import type { Ref } from "vue";
import { NButton, NPopconfirm, NSpace, NTag } from "naive-ui";
import type { DataTableColumns, PaginationProps } from "naive-ui";
import { genderLabels } from "@/constants";
import { fetchUserList } from "@/service";
import { useBoolean, useLoading } from "@/hooks";
import TableActionModal from "./components/table-action-modal.vue";
import type { ModalType } from "./components/table-action-modal.vue";
import ColumnSetting from "./components/column-setting.vue";

const { loading, startLoading, endLoading } = useLoading(false);
const { bool: visible, setTrue: openModal } = useBoolean();

const tableData = ref<UserManagement.User[]>([]);
function setTableData(data: UserManagement.User[]) {
	tableData.value = data;
}

async function getTableData() {
	startLoading();
	let input: UserManagement.GetUserInfoListInput = {
		pageIndex: pagination.page || 1,
		pageSize: pagination.pageSize || 20,
		accountName: "",
		displayName: ""
	};
	const { data } = await fetchUserList(input);
	if (data) {
		pagination.itemCount = data.total;
		setTimeout(() => {
			const transformedData = (data.pageDatas || []).map((item: ApiUserManagement.User, index: number) => ({
				...item,
				index: index + 1, // 添加序号
				key: item.userId, // 假设 userId 是唯一的标识符
			}));
			setTableData(transformedData as UserManagement.User[]);
			endLoading();
		}, 1000);
	}
}

const columns: Ref<DataTableColumns<UserManagement.User>> = ref([
	{
		type: "selection",
		align: "center",
	},
	{
		key: "index",
		title: "序号",
		align: "center",
	},
	{
		key: "accountName",
		title: "登录账号",
		align: "center",
	},
	{
		key: "userName",
		title: "用户名",
		align: "center",
	},
	// {
	// 	key: "age",
	// 	title: "用户年龄",
	// 	align: "center",
	// },
	{
		key: "gender",
		title: "性别",
		align: "center",
		render: (row) => {
			if (row.gender) {
				const tagTypes: Record<UserManagement.GenderKey, NaiveUI.ThemeColor> = {
					"0": "success",
					"1": "warning",
					"99": "error",
				};

				return (
					<NTag type={tagTypes[row.gender]}>{genderLabels[row.gender]}</NTag>
				);
			}

			return <span></span>;
		},
	},
	// {
	// 	key: "phone",
	// 	title: "手机号码",
	// 	align: "center",
	// },
	// {
	// 	key: "email",
	// 	title: "邮箱",
	// 	align: "center",
	// },
	// {
	// 	key: "userStatus",
	// 	title: "状态",
	// 	align: "center",
	// 	render: (row) => {
	// 		if (row.userStatus) {
	// 			const tagTypes: Record<
	// 				UserManagement.UserStatusKey,
	// 				NaiveUI.ThemeColor
	// 			> = {
	// 				"1": "success",
	// 				"2": "error",
	// 				"3": "warning",
	// 				"4": "default",
	// 			};

	// 			return (
	// 				<NTag type={tagTypes[row.userStatus]}>
	// 					{userStatusLabels[row.userStatus]}
	// 				</NTag>
	// 			);
	// 		}
	// 		return <span></span>;
	// 	},
	// },
	{
		key: "registerTime",
		title: "注册时间",
		align: "center",
	},
	{
		key: "lastLoginTime",
		title: "最后登录时间",
		align: "center",
	},
	{
		key: "actions",
		title: "操作",
		align: "center",
		render: (row) => {
			return (
				<NSpace justify={"center"}>
					<NButton size={"small"} onClick={() => handleEditTable(row.userId)}>
						编辑
					</NButton>
					<NPopconfirm onPositiveClick={() => handleDeleteTable(row.userId)}>
						{{
							default: () => "确认删除",
							trigger: () => <NButton size={"small"}>删除</NButton>,
						}}
					</NPopconfirm>
				</NSpace>
			);
		},
	},
]) as Ref<DataTableColumns<UserManagement.User>>;

const modalType = ref<ModalType>("add");

function setModalType(type: ModalType) {
	modalType.value = type;
}

const editData = ref<UserManagement.User | null>(null);

function setEditData(data: UserManagement.User | null) {
	editData.value = data;
}

function handleAddTable() {
	openModal();
	setModalType("add");
}

function handleEditTable(rowId: string) {
	const findItem = tableData.value.find((item) => item.userId === rowId);
	if (findItem) {
		setEditData(findItem);
	}
	setModalType("edit");
	openModal();
}

function handleDeleteTable(rowId: string) {
	window.$message?.info(`点击了删除，rowId为${rowId}`);
}

const pagination: PaginationProps = reactive({
	page: 1,
	pageSize: 10,
	showSizePicker: true,
	pageSizes: [10, 15, 20, 25, 30],
	onChange: (page: number) => {
		pagination.page = page;
		getTableData();
	},
	onUpdatePageSize: (pageSize: number) => {
		pagination.pageSize = pageSize;
		pagination.page = 1;
		getTableData();
	},
});

function init() {
	getTableData();
}

// 初始化
init();
</script>

<style scoped></style>
